<!--
 * @Author: 极客James
 * @Motto: 求知若渴,虚心若愚
 * @Github: https://github.com/Geek-James/ddBuy
 * @掘金: https://juejin.im/user/5c4ebc72e51d4511dc7306ce
 * @LastEditTime: 2019-11-07 09:18:59
 * @Description: 我的->我的订单->订单类型
 * @FilePath: /ddBuy/src/views/mine/Children/MyOrderChildren/OrderType.vue
 -->
<template>
    
  <div id="orderType">
        
    <div v-if="tableData.length > 0">
          <template>
           <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="orderInfoId"
      label="订单号"
      width="220">
        <template slot-scope="scope">
        <span style="font-size:5px;">{{scope.row.orderInfoId}}</span>
      </template>
    </el-table-column>
      <el-table-column
      prop=""
      label=""
      width="180">
      <template slot-scope="scope">
        <img :src="scope.row.smallImage" width="50" height="50" alt="">
        <span style="font-size:10px;">{{scope.row.name}}</span>

      </template>
    </el-table-column>
    <el-table-column
      prop=""
      label="购买数量"
      width="180">
      <template slot-scope="scope">
       
        数量：<span style="font-size:10px;">{{scope.row.num}}</span>
        
      </template>
    </el-table-column>
    <el-table-column
      prop="orderInfoTimeStr"
      label="下单日期"
      width="180">
      <template slot-scope="scope">
        <span style="font-size:10px;">{{scope.row.orderInfoTimeStr}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="price"
      label="订单总金额">
      <template slot-scope="scope">
        <span style="font-size:10px;color:red;font-weight:900">￥{{scope.row.orderInfoSalePrice}}</span>
      </template>
    </el-table-column>
<el-table-column
     
      label="状态">
      <template slot-scope="scope">


        <el-button type="primary" v-if="scope.row.orderInfoState==10"  @click="zf(scope.row)">已下单《未支付（待支付）》</el-button>  
        <el-button type="danger" @click="Cancel(scope.row)" v-if="scope.row.orderInfoState==10"  plain>取消订单</el-button>

        <span v-if="scope.row.orderInfoState==20">代发货</span>

        <span v-if="scope.row.orderInfoState==50">订单已取消</span>
        <el-button type="danger" v-if="scope.row.orderInfoState==30" @click="ConfirmReceipt(scope.row)"  >确认收货</el-button>
        <el-button type="danger" v-if="scope.row.orderInfoState==40" @click="ConfirmReceipt(scope.row)"  >已收货（《待评价（点击评价）》）</el-button>
      



        <!-- <el-button type="primary"  @click="zf(scope.row)">去支付</el-button> -->
        
      </template>
    </el-table-column>
  </el-table>
            </template
      >
        
    </div>
        
    <div v-else class="noDataPlaceHold">
            <img src="./../../../../images/mine/noData.jpeg" alt="" />
            <span class="desc">{{ $t("mine.feedbackTip") }}</span>     
    </div>
      
  </div>
</template>

<script type="text/javascript">
export default {
  props: {
    orderTypeDataArray: Array,
  },
  mounted() {
    this.display();
  },
  data() {
    return {
      tableData: [],
      formdata:{
        orderInfoAuditState:0,
      }
    };
  },
  components: {},
  methods: {
    display() {
      this.axios
        .get("https://localhost:44354/api/app/show/show-order?Type="+this.orderTypeDataArray)
        .then((Response) => {
          console.log(Response.data);
          this.tableData = Response.data;
        });
    },
    // 
    ConfirmReceipt(row)
    {
         this.axios
         .post("https://localhost:44354/ConfirmReceipt确认收货?guid="+row.orderInfoId)
         .then(s=>{
           if(s.data>0)
           {
             alert("收货成功！")
             this.display();

           }
           else
           {
             alert("信息有误")
           }
         })
    },
    Cancel(row)
    {
     
      if(row.orderInfoAuditState==50)
      {
        alert("请勿重复操作")
      }
      else
      {
        this.formdata.orderInfoAuditState=50;
         this.axios
         .post("https://localhost:44354/取消订单，加库存?guid="+row.orderInfoId)
         .then(s=>{
           if(s.data>0)
           {
             alert("取消成功")
             this.display();

           }
           else
           {
             alert("取消失败")
           }
         })
      }
    },
    zf(row)
    {
      window.open("https://localhost:44354/api/app/a-li-pay/pay?Subject="+row.orderInfoName+"&outTradeNo="+row.orderInfoId+
      "&totalAmount="+row.orderInfoSalePrice)
      .then(s=>{
        if(s.data=="success")
        {
          this.$router.push("/dashboard/mine/myOrder");
          alert("付款成功")
          
          
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
#orderType {
  margin-top: 5rem;
  height: 20rem;
  .noDataPlaceHold {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 60%;
      height: 60%;
    }
    .desc {
      color: grey;
      font-size: 0.6rem;
    }
  }
  .noData {
    margin-top: 3rem;
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
